<%-- Created by IntelliJ IDEA. User: Administrator Date: 2022/12/10 Time: 10:39
To change this template use File | Settings | File Templates. --%>
<%@ page
        contentType="text/html;charset=UTF-8" language="java" %>
<%
    request.setAttribute("ctx", request.getContextPath()); %>
<%@ taglib prefix="c"
           uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ufn"
           uri="http://www.zw.com/jsp/jstl/urlFunctions" %>
<html>
<head>
    <title>客户关系管理系统登录</title>
    <link
            rel="shortcut icon"
            type="image/x-icon"
            href="${ctx}/static/favicon.ico"
    />
    <!-- 引入样式和 js  -->
    <jsp:include page="common/css_js.jsp"/>
    <style>
        .login-box {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .login-box p:last-child {
            margin-bottom: 0;
        }

        .login-form .form-control {
            background: rgba(0, 0, 0, 0.3);
            color: #fff;
        }

        .login-form .has-feedback {
            position: relative;
        }

        .login-form .has-feedback .form-control {
            padding-left: 36px;
        }

        .login-form .has-feedback .mdi {
            position: absolute;
            top: 0;
            left: 0;
            right: auto;
            width: 36px;
            height: 36px;
            line-height: 36px;
            z-index: 4;
            color: #dcdcdc;
            display: block;
            text-align: center;
            pointer-events: none;
        }

        .login-form .has-feedback.row .mdi {
            left: 15px;
        }

        .login-form .form-control::-webkit-input-placeholder {
            color: rgba(255, 255, 255, 0.8);
        }

        .login-form .form-control:-moz-placeholder {
            color: rgba(255, 255, 255, 0.8);
        }

        .login-form .form-control::-moz-placeholder {
            color: rgba(255, 255, 255, 0.8);
        }

        .login-form .form-control:-ms-input-placeholder {
            color: rgba(255, 255, 255, 0.8);
        }

        .login-form .custom-control-label::before {
            background: rgba(0, 0, 0, 0.3);
            border-color: rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body
        class="center-vh"
        style="
                background-image: url(${ctx}/static/images/login-bg.png);
                background-size: cover;
                "
>
<div class="login-box p-5 w-420 mb-0 mr-2 ml-2">
    <div class="text-center mb-3">
        <p class="text-info" style="font-size: 30px; font-weight: bolder">
            客户关系管理系统
        </p>
    </div>
    <form action="#" method="post" class="login-form">
        <!-- 用户名 -->
        <div class="form-group has-feedback">
            <span class="mdi mdi-account" aria-hidden="true"></span>
            <input type="text" class="form-control" id="username"
                   value="${ufn:decode(cookie.username.value, "utf-8")}" name="username"
                   placeholder="账号"/>
        </div>

        <!-- 密码 -->
        <div class="form-group has-feedback">
            <span class="mdi mdi-lock" aria-hidden="true"></span>
            <input type="password" class="form-control" id="password"
                   value="${ufn:decode(cookie.password.value, "utf-8")}" name="password"
                   placeholder="密码"/>
        </div>

        <!-- 验证码 -->
        <div class="form-group has-feedback row">
            <div class="col-8">
                <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
                <input type="text" id="code" name="captcha" class="form-control" placeholder="验证码">
            </div>
            <div class="col-4 text-right">
                <img src="" class="pull-right" id="captcha" style="cursor: pointer;" onclick="getCaptcha()"
                     title="点击刷新" alt="captcha">
            </div>
        </div>

        <!-- 记住密码 -->
        <div class="form-group">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" name="isRemPwd"
                ${ufn:decode(cookie.isRemPwd.value, "utf-8")?"checked":""}
                       id="remPwd"/>
                <label
                        class="custom-control-label not-user-select text-white"
                        for="remPwd"
                >记住密码</label
                >
            </div>
        </div>

        <!-- 登录 -->
        <div class="form-group">
            <button class="btn btn-block btn-primary" type="button" id="login">
                立即登录
            </button>
        </div>
    </form>
</div>
<script type="text/javascript">
    $(function () {
        let msg = "<%= request.getParameter("errorMessage") %>";
        // 登录消息
        if (msg !== "null") {
            notify("mdi mdi-close", msg, "danger");
        }

        // 回车触发登录
        $(document).keypress(function (e) {
            if (e.which === 13) {
                e.preventDefault();
                login();
            }
        });

        // 登录单击事件
        $("#login").click(function () {
            login();
        });

        // 设置默认账号秘密
        if ("${ufn:decode(cookie.username.value, "utf-8")}" === "") {
            $("#username").val("admin");
            $("#password").val("123456");
        }

        // 加载初始验证码
        getCaptcha()
    });

    // 获取验证码
    function getCaptcha() {
        $.get("${ctx}/captcha", function (data) {
            $("#captcha").attr("src", "data:image/png;base64," + data.data);
        })
    }

    // 消息弹框
    function notify(icon, msg, type) {
        $.notify({
            icon: icon,
            message: msg
        }, {
            element: 'body',
            type: type,
            placement: {
                from: 'top',
                align: 'right'
            },
            delay: 3000
        });
    }


    // 登录
    function login() {
        let $username = $("#username");
        let $password = $("#password");
        let $code = $("#code");

        if ($username.val().trim() === "") {
            notify("mdi mdi-close", "账号不能为空", "danger")
            $username.focus();
            return;
        } else if ($password.val().trim() === "") {
            notify("mdi mdi-close", "密码不能为空", "danger")
            $password.focus();
            return;
        } else if ($code.val().trim() === "") {
            notify("mdi mdi-close", "验证码不能为空", "danger")
            $code.focus();
            return;
        }

        // 加载中使用文字和颜色
        let l = $('body').lyearloading({
            opacity: 0.2,
            spinnerSize: 'lg',
            spinnerText: '登录中，请稍后...',
            textColorClass: 'text-info',
            spinnerColorClass: 'text-info'
        });
        setTimeout(function () {
            // 发送请求
            $.ajax({
                type: "POST",
                url: "${ctx}/login",
                dataType: "text",
                data: {
                    "username": $username.val(),
                    "password": $password.val(),
                    "isRemPwd": $("#remPwd").is(":checked"),
                    "code": $code.val()
                },
                success: function (data) {
                    l.destroy();
                    let result = JSON.parse(data);
                    if (result.code === 200) {
                        location.href = "${ctx}/page/index";
                    } else {
                        getCaptcha();
                        notify("mdi mdi-close", result.message, "danger");
                    }
                },
                error: function () {
                    notify("mdi mdi-close", "出错了!稍后重试...", "danger");
                }
            });
        }, 2e2);
    }
</script>
</body>
</html>
